

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>　</title>

	<style>
		body {
			color: #000000;
			background-color: #ffffff;
		}

		.page {
			position: fixed;
			width: 100%;
			height: 100%;
		}

		.time_container,
		.date_container {
			width: 100%;
			margin: auto;
			text-align: center;
		}

		.time_container {
			top: 0;
			height: 45%;
		}

		.date_container {

		}

		.time {
			padding-top: 120px;
			font-size: 16rem;
		}

		.date {
			padding-top: 20px;
			font-size: 6rem;
		}

		.weather {
			padding-top: 20px;
			font-size: 4rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.weather #weatherIcon {
			width: 128px;
		}
		.weather #weatherText {
			margin: 0 80px 0 20px;
		}

	</style>
</head>

<body>
<div class="page">
	<div class="time_container">
		<div class="time" id="time">11:27</div>
	</div>

	<div class="date_container">
		<div class="date" id="date">1月10日</div>
		<div class="date" id="week">星期三</div>
		<div class="weather" id="weather">
			<img id="weatherIcon" src="./weatherIcons/100.png" alt="weather">
			<span id="weatherText"></span>
			<span id="weatherValue"></span>
		</div>
	</div>
</div>


<script>
	function update() {
		var date = new Date()
		var utc8DiffMinutes = date.getTimezoneOffset() + 480
		date.setMinutes(date.getMinutes() + utc8DiffMinutes)

		var timeString = date.getHours() + ':' + ('0' + date.getMinutes()).slice(-2)
		var dateString = (date.getMonth() + 1) + '月' + date.getDate() + '日'
		var weekList = ['日', '一', '二', '三', '四', '五', '六']
		var weekString = '星期' + weekList[date.getDay()]

		document.getElementById("time").innerHTML = timeString
		document.getElementById("date").innerHTML = dateString
		document.getElementById("week").innerHTML = weekString
	}

	update()
	setInterval("update()", 60 * 1000)
	console.log('get weather information');
	// get weather
	var url = 'https://devapi.qweather.com/v7/weather/now?key=7ac8c8f2cfd4467a8f29ffaaf3dc961b&location=101290102';
	var xhr=new XMLHttpRequest();
	xhr.open('GET', url, false);
	xhr.onreadystatechange=function(){
		if(xhr.readyState === 4){
			if(xhr.status === 200 || xhr.status === 304){
				var response = JSON.parse(xhr.responseText);
				var weather = response.now;
				console.log(response);
				document.getElementById('weatherIcon').src = './weatherIcons/' + weather.icon + '.png';
				document.getElementById('weatherText').innerHTML = weather.text;
				document.getElementById('weatherValue').innerHTML = weather.feelsLike + '°C';
			}
		} else {
			console.error('err');
		}
	}
	xhr.send();
</script>
</body>
</html>